<template>
  <view class="asa-button" :class="mode">
    <view :class="{ 'icon-button': mode === 'icontext' || mode === 'texticon', 'button-icon': mode == 'texticon', 'button-diy': mode == 'button', custom: mode == 'custom' }">
      <up-button v-bind="$attrs" @click.stop="$emit('click', $event)" :loadingSize="loadingSize" :customStyle="customStyle"></up-button>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>
<script setup lang="ts">
/**
 * button
 * @property {String}	mode	类型, 可选值为icontext(icon文字按钮) texticon(文字icon按钮), button实心白字中等圆角
 */

const props = defineProps({
  mode: {
    type: String,
    default: 'custom',
    validator: (val: any) => {
      return ['icontext', 'texticon', 'button', 'custom'].indexOf(val) !== -1;
    },
  },
  loadingSize: {
    default: 14,
  },
  customStyle: {
    type: Object,
  },
});

onMounted(()=>{
  console.log('customStyle',props.customStyle);
  
})
</script>

<style lang="scss" scope>
.asa-button {
}
.custom {
  ::v-deep image {
    width: 28rpx !important;
    height: 28rpx !important;
    margin-right: 10rpx !important;
  }
}
.button-import {
  ::v-deep .u-button {
    border-radius: 16rpx;
    height: 60rpx !important;
    padding: 0 32rpx;
  }
}
.button-diy {
  ::v-deep .u-button {
    border-radius: 16rpx;
    height: 60rpx !important;
    padding: 0 32rpx;
  }
}
.button-icon {
  ::v-deep .u-button {
    flex-direction: row-reverse;
    padding: 0;
  }
  ::v-deep .u-icon--right {
    width: 24rpx !important;
    height: 24rpx !important;
    margin-left: 4rpx !important;
    overflow: hidden;
    margin-bottom: 2rpx;
  }
}
.icon-button {
  ::v-deep .u-icon__img .u-icon {
    width: 28rpx !important;
    height: 28rpx !important;
    margin-right: 10rpx !important;
  }
  ::v-deep .u-button--info {
    border: none;
    color: $uv-type-primary;
    background-color: transparent;
  }
  ::v-deep .u-button-mini {
    height: 36rpx;
    padding: 0 0 0 8px;
  }
  ::v-deep .u-button__text {
    font-size: 26rpx !important;
  }
}
</style>
